<?php require_once(dirname(__FILE__) . '/../../include/config.inc.php');

?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>中泓高科综合管理系统 数据大屏</title>
    <link rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IYNBZ-YNYWG-IE6QE-IQPNJ-J3HKV-BVBTX"></script>
    <style>
        body {
            max-height: 1080px !important;
            overflow: hidden !important;
        }
    </style>
</head>
<body>
<audio id="audio" src="/tz.mp3" preload="auto" style="display:none;"></audio>
<header>
    中泓高科综合管理系统 数据统计
    <span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
</header>
<div id="content">
    <div class="content_left">
        <div class="dtuplc">
            <div class="current-num">
                <div>系统任务数量</div>
                <p> {{ datas.count.all }}</p>
            </div>
        </div>
        <div class="online">
            <div class="title"><img src="images/icon01.png" width="28"/> 服务设备类型</div>
            <div class="online_con" id="container2">
            </div>
        </div>
        <div class="industry">
            <div class="title"><img src="images/star.png"/> 本月服务之星</div>
            <div class="industry_con" id="guzhang">
                <table class="panel-table" bordercolor="#0d48e0" border="1">
                    <tbody>
                    <tr class="aaa" align="center">
                        <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">工程师</td>
                        <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">结单数量</td>
                        <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">积分</td>
                    </tr>
                    <tr v-for="y in datas.managelist" class="aaa" style="font-size: 16px;" align="center">
                        <td>{{ y.truename }}</td>
                        <td>{{ y.cishu }}</td>
                        <td>{{ y.fee }}</td>
                    </tr>
                    </tbody>
                </table>


            </div>
        </div>
    </div>
    <div class="content_center">
        <div class="center_top">
            <div class="center_top_con" id="distribution_map">
            </div>
        </div>
        <div class="center_bot">
            <table class="panel-table" bordercolor="#0d48e0" border="1">
                <thead bgcolor="#0e4ae0" align="center">
                <tr height="40">
                    <th colspan="6"><img src="images/icon04.png"/> 报修列表</th>
                </tr>
                </thead>
                <tbody>
                <tr class="aaa" align="center">
                    <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">类型</td>
                    <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">任务类型</td>
                    <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">执行人</td>
                    <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">故障</td>
                    <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">进度</td>

                </tr>
                <tr v-for="y in datas.order" class="aaa" style="font-size: 16px;" align="center">
                    <td>{{ y.area }}</td>
                    <td>{{ y.renwu }}</td>
                    <td>{{ y.truename }}</td>
                    <td>{{ y.content }}</td>
                    <td>{{ y.jindu }}</td>

                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="content_right">
        <div class="report">
            <div class="report1">
                <p>等待受理</p>
                <small> {{ datas.count.waiting }}条</small>
            </div>
            <div class="report2">
                <p style="color:green">受理中</p>
                <small> {{ datas.count.doing }} 条</small>
            </div>
        </div>
        <div class="news_report">
            <div class="title"><img src="images/icon05.png"/> 今日完修率</div>
            <div class="news_list" id="wanchenglv">

            </div>
        </div>
        <div class="data_box">
            <div class="title"><img src="images/icon06.png"/> 每日任务次数</div>
            <div class="data_con" id="jilu">
            </div>
        </div>
    </div>
</div>
<!--遮罩层-->


<!-- Morris Charts CSS -->
<link href="../ui/css/plugins/morris.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/times.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../ui/js/plugins/morris/raphael.min.js"></script>
<script src="../ui/js/plugins/morris/morris.min.js"></script>
<script type="text/javascript" src="../layer/layer.js"></script>
<script type="text/javascript">
    var audio = $("#audio")[0];
    var time = 0;
    $(document).ready(function () {
        settime();
    });

    function settime() {
        if (time == 10) {
            notice();
            time = 0;
            settime();
        } else {
            setTimeout(function () {
                time++;
                settime();
            }, 1000);
        }
    }

    function notice() {
        $.ajax({
            type: 'post',
            url: "/getOrder.php",
            dataType: 'json',
            data: {},
            success: function (json) {
                //alert(json);
                if (json.success == 1) {
                    notice_window();
                }
                //console.log(json);
            },
            error: function () {
            }
        });
    }

    function notice_window() {
        $('#notice').click();
        audio.play();
        setTimeout(function () {
            $('#notice').click();
        }, 10000);
    }


    $(function () {
        //初始化地图
        center = new qq.maps.LatLng(32.976950, 114.037510);
        map = new qq.maps.Map(document.getElementById("distribution_map"), {
            center: center,
            zoom: 13,
        });
        markersArray = []
    })

    var vm = new Vue({
        el: '#content',
        data: {
            datas: {
                count: {all: 0, doing: 5, waiting: 0, working: 99},
                order: [],
                map: []
            },
            timer: null
        },
        methods: {
            setTimer: function () {
                console.log('开始定时...111')
                if (this.timer == null) {
                    this.timer = setInterval(() => {
                        console.log('开始定时...每过3秒执行一次')
                        $.ajax({
                            type: 'POST',
                            url: "data.php",
                            data: {time: Date.parse(new Date())},
                            dataType: 'JSON',
                            success: function (result) {
                                console.log(result);
                                if (result.errno == 0) {
                                    vm.datas = result.data;
                                    console.log(vm.datas);
                                    vm.$forceUpdate();
                                    getData();
                                }
                            }
                        })
                    }, 3000)
                }
            }
        },
        created: function () {
            console.log('开始定时...000');
            //this.getFamilyBase_info()
            // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
            clearInterval(this.timer)
            this.timer = null
            this.setTimer()
        },
        destroyed: function () {
            // 每次离开当前界面时，清除定时器
            clearInterval(this.timer)
            this.timer = null
        }

    })


    //工单查看
    function showgongdan(id) {
        //iframe窗
        layer.open({
            skin: 'layui-layer-molv', //样式类名
            type: 2,
            title: '工单详情',
            shadeClose: true,
            shade: false,
            //maxmin: true, //开启最大化最小化按钮
            area: ['893px', '600px'],
            content: ['../ordershow2.php?id=' + id], //iframe的url，no代表不显示滚动条

        });
    }

    //加载数据
    function getData() {
        /*map*/
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
        }
        var anchor = new qq.maps.Point(6, 6),
            size = new qq.maps.Size(32, 32),
            origin = new qq.maps.Point(0, 0);
        var map_data = vm.datas.map;
        for (var i = 0; i < map_data.length; i++) {
            var data_pos = map_data[i].latlngs;
            var latLng = eval(new qq.maps.LatLng(map_data[i].lat, map_data[i].lng));
            //var latLng = new LatLng(33.006170,114.015880);
            var marker = new qq.maps.Marker({
                position: latLng,
                map: map,
                icon: new qq.maps.MarkerImage('img/' + map_data[i].jindu + '.gif', size, origin, anchor)
            });
            markersArray.push(marker);
        }
        /*map*/

        /* type */
        var dom = document.getElementById("container2");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            calculable: true,
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '75%',
                    center: ['50%', '50%'],
                    data: function () {
                        var serie = [];
                        for (var i = 0; i < vm.datas.order_type.length; i++) {
                            var item = {
                                name: vm.datas.order_type[i].typename,
                                value: vm.datas.order_type[i].cnt
                            };
                            serie.push(item);
                        }
                        return serie;
                    }()
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

        /*完成率*/
        var wanchenglv = document.getElementById('wanchenglv');
        var myChart = echarts.init(wanchenglv);

        option = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    radius: '170',
                    startAngle: 180,
                    endAngle: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    center: ['50%', '80%'],    // 默认全局居中
                    axisTick: {            // 坐标轴小标记
                        splitNumber: 10,   // 每份split细分多少段
                        length: 12,        // 属性length控制线长
                    },
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, 'green']]
                        }
                    },
                    pointer: {
                        width: 10,
                        length: '90%',
                        color: 'rgba(255, 255, 255, 0.8)'
                    },
                    title: {
                        show: true,
                        offsetCenter: [0, '-50%'],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: '#fff',
                            fontSize: 30
                        }
                    },
                    detail: {
                        show: true,
                        backgroundColor: 'rgba(0,0,0,0)',
                        borderWidth: 0,
                        borderColor: '#ccc',
                        width: 100,
                        height: 40,
                        offsetCenter: [0, -40],       // x, y，单位px
                        formatter: '{value}%',
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontSize: 50
                        }
                    },
                    data: [{value: vm.datas.wanchenglv, name: '完成率'}]
                }
            ]
        };

        myChart.setOption(option, true);
    }

    //加载报修次数
    $(function () {


        Morris.Area({
            // ID of the element in which to draw the chart.
            element: 'jilu',
            // Chart data records -- each entry in this array corresponds to a point on
            // the chart.
            data: [
                <?php
                // 近30天 报表
                $sql5 = "SELECT FROM_UNIXTIME(`post_time` ,'%Y-%m-%d' ) as a,count(id) as b FROM `#@__order`  WHERE (TO_DAYS( NOW( ) ) - TO_DAYS( FROM_UNIXTIME( `post_time` ,  '%Y%m%d' )) <=10) group by a asc LIMIT 0 , 30";
                $dosql->Execute("$sql5", 9);  //每天用户列表
                while ($result = $dosql->GetArray(9)) {
                    $d = $result['a'];
                    echo "{ d: '" . $d . "',visits:" . $result['b'] . "},";
                }
                ?>

            ],
            // The name of the data record attribute that contains x-visitss.
            xkey: 'd',
            // A list of names of data record attributes that contain y-visitss.
            ykeys: ['visits'],
            // Labels for the ykeys -- will be displayed when you hover over the
            // chart.
            labels: ['提交次数'],
            // Disables line smoothing
            smooth: false,
        });


    })

</script>

</body>
</html>
